{% extends "base.html" %}

{% block subtitle %}
  Editor Tutorial
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}

  <style>
    html, body {
      background-color: #eee;
    }
  </style>
{% endblock %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Editor Tutorial
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block content %}
  <div class="oppia-page-cards-container">
    <md-card class="oppia-page-card oppia-long-text">
      <p>
        Welcome to the Oppia editor tutorial! This tutorial is meant to
        help you get started with your first exploration.
        First, we'll go over basic definitions and best practices, and then we'll
        walk through the process of making a small exploration.
      </p>

      <a class="oppia-about-anchor" name="creating-an-exploration"></a>
      <h3><b>The Process of Creating an Exploration</b></h3>
      <p>
        Think of an exploration as a conversation with the learner. You might
        start by introducing the topic you want to explain/explore, and
        then try and get the learner to engage with it. Along the way, you can
        ask questions to help the learner check their understanding, and
        provide them with appropriate feedback so that they don't get
        frustrated.
      </p>
      <p><b>What should an exploration be about?</b></p>
      <p>
        Typically, an exploration revolves around a question -- usually, the
        more specific, the better. A few examples:

        <ul>
          <li>
            What is the slope of a line?
          </li>
          <li>
            What are the nutritional benefits of a banana?
          </li>
          <li>
            What is the difference between Python and C#?
          </li>
        </ul>
      </p>
      <p>
        Note that the exploration does <em>not</em> need to go in depth or
        cover all aspects of what you are trying to teach. In fact, it's
        usually better and easier to make something basic (and non-branching)
        first, and then expand on it once learners start using the exploration.
        You'll be able to see the answers that learners are giving, and use
        these to add more cards/feedback as needed.
      </p>

      <a class="oppia-about-anchor" name="exploration-editor"></a>
      <h3>The Exploration Editor</h3>

      <p>
        When you first create a new exploration, you'll be taken to its editor:
      </p>

      <img src="/images/tutorial/emptyExploration.png" class="oppia-long-text-image">

      <p>
        The new exploration has just one card, called "First Card". Cards
        are the building blocks of explorations. You can think of cards as the
        places a learner (anybody who views your exploration) can potentially
        reach. All of your cards are visible in the Exploration Overview on
        the right. The editor interface only shows one card at a time, but
        you can navigate to other cards by clicking on them in the
        Exploration Overview.
      </p>

      <a class="oppia-about-anchor" name="card-components"></a>
      <h3>Parts of a Card</h3>

      <p>
        A card consists of some <b>content</b>, together with an
        <b>interaction</b> and some <b>responses</b> that can give the learner
        feedback and take them to another card based on their answer. Here are
        the meanings of these terms:
      </p>
      <h4><b>Content</b></h4>
      <p>
        The editable block of text you see in the picture below. Write whatever
        you want the learner to read.
      </p>
      <img src="/images/tutorial/content.png" class="oppia-long-text-image">
      <h4><b>Interaction</b></h4>
      <p>
        This could be a text field or any kind of input field, such as a map.
        A learner will interact with these elements by entering some text or
        placing a marker on a map.
      </p>
      <img src="/images/tutorial/interaction.png" class="oppia-long-text-image">
      <h4><b>Response</b></h4>
      <p>
        Once an interaction is chosen, you can choose what happens based on
        what the learner inputs. You can also provide feedback, and then either
        have the learner redo the interaction or move them to a different card.
      </p>
      <img src="/images/tutorial/response.png" class="oppia-long-text-image">

      <a class="oppia-about-anchor" name="sample-exploration"></a>
      <h3><b>Building a Sample Exploration</b></h3>
      <p>
        Now that you know what the terms mean, let's write a small exploration
        to help the learner understand the slope of a line!
      </p>
      <p>
        We'll create a total of 3 cards for the learner to go through in a
        linear fashion. The user will start at the First Card, answer a
        question to go to the Second Card, and then answer another question to
        go to the Third Card. Along the way, we'll add a few responses.
      </p>

      <h4><b>First Card</b></h4>
      <p>
        Let's begin by writing our introduction and asking the learner a
        question.
      </p>
      <p>
        Click on the box under "First Card" that you saw when the Exploration
        Editor first opened. That's the Content box. Type in the following:
      </p>
      <img src="/images/tutorial/card1InitialContent.png" class="oppia-long-text-image">
      <p>
        After saving the content, you'll be able to add an interaction. Let's
        add a number input interaction so the learner could input their answer
        to our question.
      </p>
      <p>Click on <b>Add Interaction</b>.</p>
      <img src="/images/tutorial/card1AddInteraction.png" class="oppia-long-text-image">
      <p>You'll be taken to a gallery from which you can choose an interaction
      to use. Go ahead and click on <b>Number Input</b>.</p>
      <img src="/images/tutorial/card1NumberInput.png" class="oppia-long-text-image">
      <p>
        Click on <b>Save Interaction</b>. The green box represents what the
        learner will see. They will be able to type their answer here.
      </p>
      <img src="/images/tutorial/card1AfterNumberInput.png" class="oppia-long-text-image">
      <p>
        Notice that you can now add responses. We can choose what happens if the
        learner types in "2", "3", or any other number. To keep it simple, let's
        just take the learner to the next card regardless of what they typed.
        Click on the box with the text "[All answers] -> (try again)". This box
        represents the <em>default</em> response Oppia gives if it does not know
        how to handle the answer. Once clicked, you should see something like
        this (but filled in for the purposes of the exploration we are making):
      </p>
      <img src="/images/tutorial/card1Response.png" class="oppia-long-text-image">
      <p>
        Now this is important: the Destination section is where you will take
        the learner next. By default, it loops back to the current card,
        which means the learner will be re-asked to type in an answer to the
        same question (but, because it's still the same question, they won't be
        presented with the content again). However, let's set the Destination
        to a new card instead and call it "Method 2". Afterwards, save both the
        feedback and destination for this card. You should now see:
      </p>
      <img src="/images/tutorial/card1End.png" class="oppia-long-text-image">
      <p>
        We're done with this card. The learner will proceed to the card
        "Method 2", so let's go there and explain the second method. We can do
        that by clicking on "Method 2" in the Destination link or in the
        Exploration Overview window. Once you do that, you'll be taken to the
        "Method 2" card.
      </p>

      <h4><b>Second Card</b></h4>
      <p>
        Now we're in the second card, "Method 2". This looks just like what you
        started the exploration with, except that the title is different and
        the Exploration Overview shows two cards.
      </p>
      <p>Add the following text:</p>
      <img src="/images/tutorial/card2Content.png" class="oppia-long-text-image">
      <p>
        Add a <b>Number Input</b> Interaction just like in the First Card.
      </p>
      <p>
        Now let's have two responses for the interaction, one if the learner
        types in an incorrect answer, and one if the answer is correct. Click on
        the default response like you did for the last card and make sure it
        looks like the following:
      </p>
      <img src="/images/tutorial/card2Response1.png" class="oppia-long-text-image">
      <p>
        Notice that we didn't change the Destination. This means that, if the
        learner input falls into this category, the learner will see the
        feedback and will be asked again to type in a number.
      </p>
      <p>
        We'd also like to catch the case where the learner's answer is correct.
        Click <b>+ Add New Oppia Response</b> this time. Change the rule to
        "Answer is equal to". Type '1', then add the following feedback and
        create a new Destination called "Last Card". It should look like this:
      </p>
      <img src="/images/tutorial/card2Response2.png" class="oppia-long-text-image">
      <p>
        After clicking <b>Save Response</b>, we'll be done with this card, so
        let's move to the "Last Card" and conclude the exploration.
        (Alternatively, as an exercise, you could have a go at explaining the
        third slope method).
      </p>

      <h4><b>Third Card</b></h4>
      <p>
        Once you're in "Last Card", add the following content, and then add
        the "End Conversation" interaction:
      </p>
      <img src="/images/tutorial/card3End.png" class="oppia-long-text-image">
      <p>
        And, <em>voilà</em> -- you've created your first exploration! Save the
        draft, and then give yourself a pat on the back.
      </p>

      <a class="oppia-about-anchor" name="improving-an-exploration"></a>
      <h3>Improving the Sample Exploration</h3>
      <p>
        After you've gotten some learners to play through your exploration, you
        can revisit it, look at the answers submitted, and improve the
        exploration based on that.
      </p>
      <p>
        For example, suppose you find that many learners give the answer 2 when
        faced with the second question. On asking some of them, you discover
        that they're computing (2 + 2)/(1 + 1). You can create an additional
        response that reminds them of the slope equation and that helps them
        identify the various terms in it.
      </p>
      <p>
        In general, you can always go back and add new cards, refine the
        current ones, or check out answers that learners have submitted, so
        that you can improve the exploration further.
      </p>

      <h4><strong>Example: Adding a response to our Sample Exploration</strong></h4>
      <p>
        Let's say you create your sample exploration, and you know learners are
        playing through it. To see the data captured by the exploration, let's
        go to the second card (Method 2) and see what answers learners have
        been trying. Here's an example of what this may look like:
      </p>
      <img src="/images/tutorial/unhandledAnswers.png" class="oppia-long-text-image">
      <p>
        In general, these <b>Unhandled Answers</b> are located at the
        bottom of each card and they can help you understand where students
        are messing up. For instance, suppose you notice that for the second
        question (asking learners to compute the slope between (1, 1) and (2, 2)),
        you're getting a response of -1. This could indicate that students are
        being inconsistent with the slope equation and incorrectly computing
        (y2-y1)/(x1-x2), which would give them -1.
      </p>
      <P>
        Let's make a response to address this. When you finish saving the
        response, it should look like this:
      </p>
      <img src="/images/tutorial/updateExplorationNewResponse.png" class="oppia-long-text-image">
      <p>
        And that's it! You've just updated your first exploration!
      </p>
    </md-card>
  </div>

  <div class="nav oppia-about-right-menu hidden-sm hidden-xs">
    <strong>Editor Tutorial</strong>
    <p><a href="#creating-an-exploration">Creating an Exploration</a></p>
    <p><a href="#exploration-editor">The Exploration Editor</a></p>
    <p><a href="#card-components">Parts of a Card</a></p>
    <p><a href="#sample-exploration">Building a Sample Exploration</a></p>
    <p><a href="#improving-an-exploration">Improving the Sample Exploration</a></p>
  </div>

  <script>
    // This scrolls the page to the anchor clicked on in the quick links menu.
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')) {
        var target = $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  </script>
{% endblock %}
